/**
 * Created by Administrator on 2018\1\25 0025.
 */
//等待页面所有dom元素加载完毕之后在执行
$(function () {
    //获取到四个li
    var $li = $(".slide_pics li");
    //将除过第一个li不移动之外，其他的三个li移动到他旁边
    $li.not(":first").css({left:760});
    //获取到小圆点的li
    var $points = $(".points li");
    //将要运动过来的li
    var nowli = 0;
    //当前要离开的li
    var prevli = 0;
    //给获取到的所有小圆点li添加点击方法
    $points.click(function () {
        //将点击的li元素的下标值赋给nowli
        nowli = $(this).index();
        //给当前正在点击的小圆点li添加类名，并且将上下同级所有元素的类名移除
        $(this).addClass("active").siblings().removeClass("active");
        //如果要滚动的这一章图片等于要离开的这一张图片，就让后面的程序不执行
        if(nowli == prevli){
            return;
        }
        //创建调用move方法
        move();
    });

    //获取左箭头
    var $prev = $(".prev");
    //获取右箭头
    var $next = $(".next");

    //给获取到的左箭头按钮添加点击方法
    $prev.click(function () {
        nowli--;
        move();
        $points.eq(nowli).addClass("active").siblings().removeClass("active");
    })

    //给获取到的右箭头添加点击方法
    $next.click(function () {
        /* nowli++;
         move();
         $points.eq(nowli).addClass("active").siblings().removeClass("active");*/
        autoPlay();
    })

    //获取滚动图片li的长度
    var len = $li.length;
    //初始化一个变量timer,用来保存定时器
    var timer = null;
    //创建一个自己动的方法
    function autoPlay() {
        nowli++;
        move();
        $points.eq(nowli).addClass("active").siblings().removeClass("active");
    }
    //开启定时器
    timer = setInterval(autoPlay,2000);

    //获取到大盒子,当鼠标移入到大盒子上面的时候关闭定时器，离开开启定时器
    $(".slide").hover(function () {
        clearInterval(timer);  //清除定时器
    },function () {
        //开启定时器
        timer = setInterval(autoPlay,2000);
    })

    //定义创建一个move方法
    function move() {
        if(nowli < 0){
            nowli = len - 1;
            prevli = 0;
            //将正在发生的li放在左边去
            $li.eq(nowli).css({left:-760});
            //将当前要离开的li移动到右边去
            $li.eq(prevli).stop().animate({left:760})
            //将要运动过来的li方法指定的位置
            $li.eq(nowli).stop().animate({left:0});
            //将运动过来的li的值赋给将要离开的li盒子的值
            prevli = nowli;
            //不在执行下面的
            return;
        }

        if(nowli > len - 1){
            nowli = 0;
            prevli = len-1;
            $li.eq(nowli).css({left:760});
            $li.eq(prevli).stop().animate({left:-760});
            $li.eq(nowli).stop().animate({left:0});
            prevli = nowli;
            return;
        }

        //从小到大的移动，将要滚动进来的图片放到右边，将要离开的图片放到左边
        if(nowli > prevli){
            $li.eq(nowli).css({left:760});
            $li.eq(prevli).stop().animate({left:-760});
            $li.eq(nowli).stop().animate({left:0});
            prevli = nowli;
        }else{
            $li.eq(nowli).css({left:-760});
            $li.eq(prevli).stop().animate({left:760});
            $li.eq(nowli).stop().animate({left:0});
            prevli = nowli;
        }
    }
});
